<template>
  <div class="video-wrapper">
  <div class="video-card">
    <div class="video-header">
      <span class="video-title">推荐视频</span>
      <span class="video-more">更多</span>
    </div>
    <el-row :gutter="12">
      <el-col
        v-for="(video, index) in module.props.videos"
        :key="index"
        :span="parseInt(module.props.videoTypesetting) || 12"
      >
        <el-card
          :body-style="{ padding: '10px' }"
          shadow="hover"
          class="product-card"
        >
          <a :href="video.url" target="_blank">
            <img :src="video.cover" alt="video.title" class="product-img" />
            <div class="product-name">{{ video.title }}</div>
          </a>
        </el-card>
      </el-col>
    </el-row>
  </div>
  </div>
</template>

<script>
export default {
  name: "VideoModule",
  props: ["module"],
};
</script>

<style scoped>
.video-wrapper {
  background-color: rgb(242, 246, 252);
  padding: 12px;
  box-sizing: border-box;
}

.video-card {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.video-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.video-title {
  font-weight: bold;
  font-size: 16px;
  color: #333;
}

.video-more {
  font-size: 14px;
  color: #409eff;
  cursor: pointer;
}

.video-player {
  width: 100%;
  border-radius: 8px;
}
</style>
